<template>
  <div class="view-container">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>流程监控</span>
        </div>
        <div class="header-form">
          <div class="header-form-item">
            <el-button icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
          </div>
<!--          <div class="header-form-item">
            <el-button icon="el-icon-edit" @click="openEditDialog(true)">编辑</el-button>
          </div>
          <div class="header-form-item">
            <el-button type="danger" :loading="delLoading" icon="el-icon-delete" @click="del">{{isBatchesDel}}</el-button>
          </div>-->
          <!--搜索-->
          <div class="header-form-item">
            <el-button type="primary"  plain  icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>
<!--          <div class="header-form-item">
            <el-button type="success" icon="el-icon-notebook-2" @click="openEditDialog(false)">报销申请</el-button>
          </div>-->
          <div class="header-form-item">
            <el-select v-model="searchForm.letterState" placeholder="状态" @change="fetchData" clearable>
              <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="header-form-item">
            <el-input clearable @input="AntiShake" placeholder="申请人" v-model="searchForm.name"></el-input>
          </div>
        </div>
      </div>
    </header>

    <section>
      <el-table
        ref="table"
        :data="tableData"
        border
        stripe
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column prop="baoXiaoRenName" label="经办人" width="100" align="center" />
        <el-table-column label="情况说明" align="left" >
          <template slot-scope="s">
            <el-link @click="showDetail(s.row.baoXiaoId)">{{s.row.qingKuangShuoMing}}</el-link>
          </template>
        </el-table-column>
        <el-table-column  prop="yongTu" label="用途" width="250" align="center"/>
        <el-table-column sortable prop="riQi" label="申请时间" :formatter="riQiFmt" width="150" align="center"/>
        <el-table-column sortable prop="stateName" label="状态" width="100" align="center">
          <template slot-scope="s">
            <el-tag :type="switchType(s.row.stateName)">{{s.row.stateName}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>
  </div>
</template>

<script>
  import listMixin from '@/mixin/listMixin'
  import baoXiaoAPI from '@/api/baoXiao/baoXiao'
  import flowManagerListMixin from '@/mixin/flowManagerListMixin'
  export default {
    name: 'BaoXiaoMonitoring',
    mixins: [listMixin,flowManagerListMixin],
    data() {
      return {
        searchForm:{
          name:'',
          letterState:''
        },
        stateList:[],
      }
    },
    created() {
      this.getStateList()
    },
    methods: {
      fetchData(){
        baoXiaoAPI.getliuChengJianKongList({
          name:this.searchForm.name,
          letterState: this.searchForm.letterState,
          pageIndex:this.page.index,
          pageSize:this.page.size
        }).then(res=>{
          this.tableData = res.records
          this.page.total = res.total
        })
      },
      getStateList(){
        baoXiaoAPI.stateList().then(res=>{
          console.log(res)
          this.stateList = res.result
        })
      },
      riQiFmt(row){
        return this._util.format(row.riQi)
      },
      showDetail(id){
        this.$router.push('/baoxiao/approval-detail/'+id+'/'+false)
      },
    }
  }
</script>

<style scoped lang="scss">

</style>
